


AO3 Workskin Testing and Tutorials

by junietuesday25



Category: No Fandom
Genre: Fanwork Research & Reference Guides, Gen
Language: English
Status: In-Progress
Published: 2019-10-05
Updated: 2019-10-16
Packaged: 2020-10-10 16:51:04
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 4
Words: 2,176
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/20531333
Author URL: https://archiveofourown.org/users/junietuesday25/pseuds/junietuesday25
Summary: where I test and share my original workskins and experiment with improvements to existing skins.additions toHeterochromia_Mars's Discord skinTV/theater scriptsAO3 EntriesTumblr DMs(experimental)last edit: 3/27/20





	1. Additions/Edits to Heterochromia_Mars's Discord Skin

**Author's Note:**

  * Inspired by [Discord (Dark Theme) Work Skin Guide/Preview](https://archiveofourown.org/works/12142470) by [Heterochromia_Mars](https://archiveofourown.org/users/Heterochromia_Mars/pseuds/Heterochromia_Mars). 
  * Inspired by [How to Make iOS Text Messages on AO3](https://archiveofourown.org/works/6434845) by [CodenameCarrot](https://archiveofourown.org/users/CodenameCarrot/pseuds/CodenameCarrot), [La_Temperanza](https://archiveofourown.org/users/La_Temperanza/pseuds/La_Temperanza). 

>   * all the chapters have been updated with the CSS and HTML guides except for the ones labelled "experimental"!!

**Notes for the Chapter:**

>   * ok so i half have a solution? just place a div around each group of messages where there was previously a p, then make each span into its own paragraph. using this method you have to use "text2"
>   * BUT the problem is when i tried to apply this method to messages that DON'T need to be wrapped, they don't go onto separate lines for some reason? they're paragraphs so i figured they'd automatically go on their own lines apparently not, i even tried to add in br's but that didn't work
>   * additionally, i still haven't fixed the "container not blowing up" problem. hhhh
>   * idk i tried?? i'll come back and work on this later
> 
> CREDIT TO THE SKIN GOES TO HETEROCHROMIA_MARS!! THEY'RE A TOTAL GENIUS FOR COMING UP WITH THE CODE FOR ALL THIS, I JUST MADE A COUPLE SMALL EDITS. GO SHOWER THEM WITH KUDOS AND COMMENTS (AND IF YOU'RE READING THIS YOU'RE AWESOME)

  
# moore-than-surviiiiiiiive  
  


hello kitty sneakersToday at 4:42 PM

ccccome on ccccome on go go ccccome on ccccome on go go i'm waiting for my porno to load (dun dun dun dun) my brain is gonna freakin explode (dun dun dun dun) and now of course it's time to hit the road which means i'll be uncomfortable all day but that really isn't such a change (dun dun dun dun) if i'm not feeling weird or super strange my life would be in utter disarray cause freaking out is my okay good morning time to start the day

ccccome on ccccome on go go ccccome on go go now should i take the bus or walk instead (duh nuh nuh nuh) i feel my stomach filling up with dread (duh nuh nuh nuh) when i get nervous my whole face goes red DUDE weight the options calmly and be still a junior on the bus is killer weak but if i walk when i arrive i'm gonna straight-up reek and my boxers will be bunchy and my pits will leak ugh god i wish i had the skill to just be fine and cool and chill

* * *

hello kitty sneakersToday at 4:57 PM

i don't wanna be a hero just wanna stay in the line i'll never be a rob deniro for me joe pesci is fine and so i follow my own rules and i use them as my tools to stay-i-ay alive i don't wanna be special no no i just wanna survive (edited)

* * *

  
# excuse-me-mister-beetlejuice  
  


the ghost with the mostToday at 4:20 AM

you could use a **buddy**  


dont u wanna _pal_  


yes i do!! yes i do!!  


gurl the way i see it ur daddy should be leavin and @you should stick around and kill him!  


* * *

just a bunch of broken piecesToday at 4:23 AM

WHAT

* * *

  


### MY EDITS/ADDITIONS TO THE SKIN

  * add cursor: pointer; to img.options, img.icon , .name, and .blulink (this is what makes the cursor change to the pointing finger when you hover over things)
  * add cursor: text; to img.input (this is what makes it look like you can actually start typing into the message box)
  * delete a and instead, if you want to make an actual link look like a discord link, you can add class="blulink" to the a tag like this: <a href="[insert url here]" class="blulink">[add the text you want the link to read here]</a>
  * change hr to .divider (the period is important!), then when you go to add message breaks, type <hr class="divider" />, and do the same thing with b and .db
  * to make timestamps and the "edited" thing, paste this into your skin:

> #workskin .timestamp {  
margin-top: -30px;  
margin-right: 3px;  
color: rgba(255, 255, 255, 0.2);  
font-size: .75rem;  
font-weight: 400;  
}  
  
#workskin .edited {  
color: rgba(255, 255, 255, 0.2);  
font-size: .625rem;  
font-weight: 400;  
}

  


  * and put <span class="timestamp">[insert time here]</span> after the "name" span tag
  * to tag a user, use <span class="tag">@[insert user]</span>, and to tag a role, replace "tag" with "roletag[#]" — roletags are labelled 1-10 and 1d-10d, the same way Heterochromia_Mars labelled the "role" class. css for the tags is below (warning: it's super long)

> #workskin .tag {  
background-color: rgba(114,137,218,.1);  
color: #7289da;  
cursor: pointer;  
}  
  
#workskin .tag:hover,  
#workskin .tag:focus {  
background-color: rgba(114,137,218,.7);  
color: #ffffff;  
cursor: pointer;  
}  
  
#workskin .roletag1 {  
color: #1ABC9C;  
background-color: rgba(26,188,156,.1);  
}  
  
#workskin .roletag1:hover {  
background-color: rgba(26,188,156,.3);  
}  
  
#workskin .roletag1d {  
color: #11806A;  
background-color: rgba(17,128,106,.1);  
}  
  
#workskin .roletag1d:hover {  
background-color: rgba(17,128,106,.3);  
}  
  
#workskin .roletag2 {  
color: #2ECC71;  
background-color: rgba(46,204,113,.1);  
}  
  
#workskin .roletag2:hover {  
background-color: rgba(46,204,113,.3);  
}  
  
#workskin .roletag2d {  
color: #1F8B4C;  
background-color: rgba(31,139,76,.1);  
}  
  
#workskin .roletag2d:hover {  
background-color: rgba(31,139,76,.3);  
}  
  
#workskin .roletag3 {  
color: #3498DB;  
background-color: rgba(52,152,219,.1);  
}  
  
#workskin .roletag3:hover {  
background-color: rgba(52,152,219,.3);  
}  
  
#workskin .roletag3d {  
color: #206694;  
background-color: rgba(32,102,148,.1);  
}  
  
#workskin .roletag3d:hover {  
background-color: rgba(32,102,148,.3);  
}  
  
#workskin .roletag4 {  
color: #9B59B6;  
background-color: rgba(155,89,182,.1);  
}  
  
#workskin .roletag4:hover {  
background-color: rgba(155,89,182,.3);  
}  
  
#workskin .roletag4d {  
color: #71368A;  
background-color: rgba(113,54,138,.1);  
}  
  
#workskin .roletag4d:hover {  
background-color: rgba(113,54,138,.3);  
}  
  
#workskin .roletag5 {  
color: #E91E63;  
background-color: rgba(233,30,99,.1);  
}  
  
#workskin .roletag5:hover {  
background-color: rgba(233,30,99,.3);  
}  
  
#workskin .roletag5d {  
color: #AD1457;  
background-color: rgba(173,20,87,.1);  
}  
  
#workskin .roletag5d:hover {  
background-color: rgba(173,20,87,.3);  
}  
  
#workskin .roletag6 {  
color: #F1C40F;  
background-color: rgba(241,196,15,.1);  
}  
  
#workskin .roletag6:hover {  
background-color: rgba(241,196,15,.3);  
}  
  
#workskin .roletag6d {  
color: #C27C0E;  
background-color: rgba(194,124,14,.1);  
}  
  
#workskin .roletag6d:hover {  
background-color: rgba(194,124,14,.3);  
}  
  
#workskin .roletag7 {  
color: #E67E22;  
background-color: rgba(230,126,34,.1);  
}  
  
#workskin .roletag7:hover {  
background-color: rgba(230,126,34,.3);  
}  
  
#workskin .roletag7d {  
color: #A84300;  
background-color: rgba(168,67,0,.1);  
}  
  
#workskin .roletag7d:hover {  
background-color: rgba(168,67,0,.3);  
}  
  
#workskin .roletag8 {  
color: #E74C3C;  
background-color: rgba(231,76,60,.1);  
}  
  
#workskin .roletag8:hover {  
background-color: rgba(231,76,60,.3);  
}  
  
#workskin .roletag8d {  
color: #992D22;  
background-color: rgba(153,45,34,.1);  
}  
  
#workskin .roletag8d:hover {  
background-color: rgba(153,45,34,.3);  
}  
  
#workskin .roletag9 {  
color: #95A5A6;  
background-color: rgba(149,165,166,.1);  
}  
  
#workskin .roletag9:hover {  
background-color: rgba(149,165,166,.3);  
}  
  
#workskin .roletag9d {  
color: #979C9F;  
background-color: rgba(151,156,159,.1);  
}  
  
#workskin .roletag9d:hover {  
background-color: rgba(151,156,159,.3);  
}  
  
#workskin .roletag10 {  
color: #607D8B;  
background-color: rgba(96,125,139,.1);  
}  
  
#workskin .roletag10:hover {  
background-color: rgba(96,125,139,.3);  
}  
  
#workskin .roletag10d {  
color: #546E7A;  
background-color: rgba(84,110,122,.1);  
}  
  
#workskin .roletag10d:hover {  
background-color: rgba(84,110,122,.3);  
}  


  


  * to make the yellow box appear around a text that @'d you, first paste the below into the CSS

> #workskin .mentioned {  
color: #B4B5B7;  
margin-right: 3px;  
margin-bottom: .2em;  
padding-left: 10px;  
display: inline-block;  
width: 90%;  
background: rgba(250,166,26,.2);  
border-left: 4px solid #faa61a;  
border-radius: 3px;  
}  
  
#workskin .mindent {  
padding-left: 10px;  
}  
  
#workskin .mentioned2 {  
color: #B4B5B7;  
margin-right: 3px;  
margin-bottom: .2em;  
padding-left: 10px;  
display: inline-block;  
width: 90%;  
background: rgba(250,166,26,.2);  
border-left: 4px solid #faa61a;  
border-radius: 3px;  
}  
  
#workskin .mindent2 {  
padding-left: 50px;  
}

  * then, if it's the first message, use "mentioned" in place of "text", all you have to do is replace the word. also, add <span class="mindent"></span> right before it to get the indent. yeah it's inefficient but it's the only way i could think of. if it's a text2, do the exact same thing but replace "mentioned" with "mentioned2" and "mindent" with "mindent2"

**Notes for the Chapter:**

> if any of this was unclear, please let me know!


	2. TV/Theater Scripts

**Notes for the Chapter:**

>   * the indenting looks perfectly fine on desktop but i can't figure out how to get it to scale properly on mobile. it's _okay_ rn but it could be better
>   * need to add parentheticals (the actor notes in paretheses) and i think act headings? idk if i need ones for scenes though

NARRATOR

I never know where to begin...  
The map of this story is both tiny and vast. And beginning is as simple and complex as choosing a path to travel and trusting that it will connect to all other paths.  
I suppose I could begin by telling you that there is an invisible world woven into the fabric of our daily lives. Don't go looking for this invisible world. Because you won't find it.

  


### HOW TO CODE IT

###### CSS

  * first of all, create a workskin by going to dashboard, finding "Skins" two categories down from (or next to on mobile) the "Dashboard" button, clicking the button that says "Work Skins", then clicking the one that says "Create Work Skin". then fill in whatever you want into the title (and description, if you want) boxes and paste this into the "CSS" box:

#workskin .script {  
background: #fff;  
color: #000;  
font-family: Courier, "Courier New", "Lucida Console", Monaco, monospace;  
padding: 15px;  
width: 40em;  
max-width: 85%;  
margin: 0 auto 25px;  
display: block;  
box-shadow: 0 0 10px rgba(0,0,0,0.3);  
position: relative;  
text-align: justify;  
}

#workskin .script:before,  
#workskin .script:after {  
content: "";  
height: 98%;  
position: absolute;  
width: 100%;  
z-index: -1;  
}

#workskin .script:before {  
background: #fafafa;  
box-shadow: 0 0 8px rgba(0,0,0,0.2);  
left: -5px;  
top: 4px;  
transform: rotate(-2.5deg);  
}

#workskin .script:after {  
background: #f6f6f6;  
box-shadow: 0 0 3px rgba(0,0,0,0.2);  
right: -3px;  
top: 1px;  
transform: rotate(1.4deg);  
}

#workskin .character {  
margin-left: 15em;  
}

#workskin .dialogue {  
margin-left: 7em;  
margin-right: 2em;  
display: block;  
}

###### HTML

  * when you go to create the work, make sure your workskin is selected in the last dropdown menu under "Associations"
  * make sure you're in html mode (not rich text!) when you paste in the below:

<div class="script">  
<p class="character">[insert character name here]</p>  
<p class="dialogue">[insert dialogue here]</p></div>

  * and just copy-and-paste those two elements as many times as needed to create a conversation! put <br /> after a line if you want to put a line break in the middle of dialogue
  * however, because you're in html mode, if you want to put any regular prose into the same chapter, you're gonna have to use html tags for the rest of the chapter. paragraphs will form automatically, but to do bold, italics, underlines, and strikethroughs, this is how you do it:

> BOLD: b = “<b>[insert bolded word here]</b>” = “**[insert bolded word here]**”  
ITALICS: i = “<i>[insert italicized word here]</i>” = “_[insert italicized word here]_”  
UNDERLINE: u = “<u>[insert underlined word here]</u>” = “[insert underlined word here]”  
STRIKETHROUGH: s = “<s>[insert word with strikethrough here]</s>” = “<s>[insert word with strikethrough here]</s>”  


**Notes for the Chapter:**

> as always, if you have any questions, please let me know!


	3. AO3 Entries

**Notes for the Chapter:**

>   * need to figure out how to do the archive symbols (i hate working with images)
>   * (on desktop only) text with dotted underlines can be hovered over to see more notes

Romantically by junietuesday25  
Be More Chill - Iconis/Tracz

09 Jul 2019

**No Archive Warnings Apply**, Brooke Lohst & Original Male Character, Brooke Lohst/Jenna Rolan, Brooke Lohst, Jenna Rolan, Original Male Character, (that OC is Brooke's brother), Chill Summer, Fluff, Getting Together, Post-Canon

Brooke comes out to her brother—but her pansexuality isn't the only thing that comes to light.  


Part **8** of #chill summer  


Language: English Words: 681 Chapters: 1/1 Comments: 1 Kudos: 12 Hits: 69

  


### HOW TO CODE IT

###### CSS

  * as always, before we can code in-fic, we need to make the workskin. go to dashboard, find "Skins" two categories down from (or next to on mobile) the "Dashboard" button, click the button that says "Work Skins", then click the one that says "Create Work Skin". then fill in whatever you want into the title (and description, if you want) boxes and paste this into the "CSS" box:

#workskin .fic {  
border: 1px solid #ddd;  
max-width: 95%;  
width: 45em;  
display: block;  
margin: auto;  
padding: .75em;  
position: relative;  
}

#workskin .fichead {  
margin-top: 0;  
}

#workskin .date {  
position: absolute;  
top: .75em;  
right: .75em;  
margin: 0;  
font-family: monospace;  
}

#workskin .redlinks {  
color: #900;  
cursor: pointer;  
border-bottom: 1px solid;  
}

#workskin .redlinks:focus {  
border: 1px dotted #900;  
}

#workskin .tags {  
border-bottom: 1px dotted;  
cursor: pointer;  
}

#workskin .tags:hover {  
background-color: #900;  
color: #FFFFFF;  
}

#workskin .tags:focus {  
border: 1px dotted;  
}

#workskin .rtag {  
background-color: #eee;  
cursor: pointer;  
border-bottom: 1px dotted;  
}

#workskin .rtag:hover {  
background-color: #900;  
color: #FFFFFF;  
}

#workskin rtag:focus {  
border: 1px dotted;  
}

#workskin .graylinks {  
color: #666;  
border-bottom: 1px solid;  
cursor: pointer;  
}

#workskin .graylinks:hover {  
color: #999;  
}

#workskin .graylinks:focus {  
border: 1px dotted;  
}

#workskin .stats {  
text-align: right;  
margin-bottom: 0;  
}

###### HTML

  * the below is a blank version of the html for the fic! everything in bold is what you can replace w/ your actual content
  * underneath it is what the words i put in would look like

<div class="fic">

<p class="fichead"><span class="redlinks">**Title**</span> by <span class="redlinks">**Author123**</span><br />  
<span class="tags">**Fandom - Creator**</span></p>

<p class="date">**Dy Mth Year**</p>

<p><b><span class="tags">**Archive Warnings**</span></b>, <span class="rtag">**Character A** & **Character B**</span>, <span class="rtag">**Character C/Character D**</span>, <span class="tags">**Tag 1**</span>, <span class="tags">**Tag 2**</span>, <span class="tags">**Tag 3**</span>, <span class="tags">**Tag 4**</span>, <span class="tags">**Tag 5**</span>

<p>**Summary summary summary summary summary you get the idea right?**<br /></p>

<p>Part <b>**#**</b> of <span class="graylinks">**Series Title**</span><br /></p>

<p class="stats">Language:&ensp**X**&emspWords:&ensp**#**&emspChapters:&ensp**#**&emspComments:&ensp<span class="graylinks">**#**</span>&emspKudos:&ensp<span class="graylinks">**#**</span>&emspHits:&ensp**#**</p></div>

  


Title by Author123  
Fandom - Creator

Dy Mth Year

**Archive Warnings**, Character A & Character B, Character C/Character D, Tag 1, Tag 2, Tag 3, Tag 4, Tag 5

Summary summary summary summary summary you get the idea right?  


Part **#** of Series Title  


Language: X Words: # Chapters: # Comments: # Kudos: # Hits: #

  


  * if, by chance, you wanted to replace the tags with links to the actual ao3 tags, replace span with a and add href="[url to the tag]". same with if you want to link to an actual author, story, series, etc.
  * okay so i get that's a bad explanation, it's hard to describe over text so:

> <span class="tags">**Tag 1**</span> **→** <a href="[url]" class="tags">**Tag 1**</a>
> 
> <span class="redlinks">**Title**</span> **→** <a href="[url]" class="redlinks">**Title**</a>

  * which turns "Romantically" into "[Romantically](https://archiveofourown.org/works/19749808)" and "Fluff" into "[Fluff](https://archiveofourown.org/tags/Fluff/works)"
  * since we're in html mode, you'll need to do any other formatting with html tags. see [the end of chapter 2](https://archiveofourown.org/works/20531333/chapters/50021519#htmlref) for a quick html guide for bold, italics, underline, and strikethrough

**Notes for the Chapter:**

> let me know if you have any questions!!


	4. Tumblr DMs (EXPERIMENTAL)

**Notes for the Chapter:**

>   * i have no clue what is happening with the header rip, also i need to find a better way to show the diagonal arrow bc on mobile its an emoji
>   * ok but ao3 keeps adding p tags before the divs which is causing that space between the header and the body’s background, but idk how else to solve the “messages can’t have line breaks” problem other than moving all the tags up in size (spans to p, ps to divs), and the header now has to be a div but ???? hhhhhhhhh
> 
> the base code is by La_Temperanza and CodenameCarrot!! i just modified it (to little avail so far rip). please go check out their guide to iOS messages!! it's excellent, i've used it in multiple of my fics and drafts

thebroduet ••• ↘ X

**momentbymoment**  
hey dude we've been best friends for a really long time now

**thebroduet**  
uh huh?

**Author's Note:**

> check out my [tumblr](https://junietuesday.tumblr.com/)!! you can send me questions there if you'd prefer it over commenting


End file.
